<template>
    <div>
        <h1>input树形结构</h1>
        <treeselect :options="optionsMechanism" placeholder="请选择上级菜单" v-model="selectID" />
        <iframe src="https://www.ixigua.com/" frameborder="0"></iframe>
        <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">1121212</div></el-col>
</el-row>
    </div>
</template>

<script>

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'ElementComponetsQuestionTree',

    data() {
        return {
            selectID: "",
            optionsMechanism: [
                {
                    id: '1',
                    label: '零食',
                    children: [{
                        id: '1',
                        label: '苹果',
                        isNew: true,
                    }, {
                        id: 'grapes',
                        label: 'Grapes 🍇',
                    }, {
                        id: 'pear',
                        label: 'Pear 🍐',
                    }, {
                        id: 'strawberry',
                        label: 'Strawberry 🍓',
                    }, {
                        id: 'watermelon',
                        label: 'Watermelon 🍉',
                    }],
                },
                {
                    id: 'vegetables',
                    label: 'Vegetables',
                    children: [{
                        id: 'corn',
                        label: 'Corn 🌽',
                    }, {
                        id: 'carrot',
                        label: 'Carrot 🥕',
                    }, {
                        id: 'eggplant',
                        label: 'Eggplant 🍆',
                    }, {
                        id: 'tomato',
                        label: 'Tomato 🍅',
                    }],
                }
            ],
        };
    },
    components: { Treeselect },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped></style>